<template>
  <div>
    <div v-title>保单</div>
    <van-tabs type="card" style="margin:10px 0;overflow:hidden;" @click="listchange">
      <van-tab v-for="index in tc" :title="index" :key="index">
      </van-tab>
    </van-tabs>
    <div class="tab">
      <div class="noch" v-for="(item,index) in filter" :key="index" @click="selected(index)" :class="{pick: activeName == index}">{{item}}</div>
    </div>
    <template v-if="Data!=''">
      <ul v-waterfall-lower="loadMore" :waterfall-disabled="disabled" waterfall-offset="100">
        <li style="padding-top:20px;padding-bottom:50px;">
          <div @click="TZYM(i.ID,i.NowNumber,i.AggreeContractTime,i.StatusID,Commonid)" class="D1" v-for="i in Data" :key="i.id">
            <!--选择银行、保单状态-->
            <div class="D1T1">
              <!--选择银行-->
              <div class="D1TF">
                <div class="D1YH1">
                  <img v-if="i.InsuranceLogo!=null" :src="GetImgPath(i.InsuranceLogo,200,200)">
                  <img v-else src="../image/cxbj.png">
                </div>
                <div class="D1YH2">{{i.InsuranceName}}</div>
              </div>
              <!--保单状态-->
              <div class="D1TR">
                <div v-if="i.StatusID==0" style="color:#999999">{{i.StatusName}}</div>
                <div v-else-if="i.StatusID==1" style="color:rgb(13, 187, 104);">{{i.StatusName}}</div>
                <div v-else-if="i.StatusID==2" style="color:#ff1c01;">{{i.StatusName}}</div>
                <div v-else-if="i.StatusID==3" style="color:#ff1c01;">{{i.StatusName}}</div>
              </div>
            </div>
            <!--保单详情-->
            <div class="D1T2">
              <div>
                <div>保单总额</div>
                <div>￥{{i.OrderAmount}}(包含手续费￥{{i.ServiceCharge}})</div>
              </div>
              <div>
                <div>保单期限</div>
                <div>
                  <template v-if="i.StartTime!=null && i.EndTime!=null">
                    {{i.StartTime.split(' ')[0]}}至{{i.EndTime.split(' ')[0]}}
                  </template>
                </div>
              </div>
              <div>
                <div>车主姓名</div>
                <div>{{i.CarOwner}}</div>
              </div>
              <div>
                <div>号牌号码</div>
                <div>{{i.PlateNumber}}</div>
              </div>
            </div>

          </div>

        </li>
      </ul>
    </template>
    <!--暂无相关记录-->
    <template v-if="Nodata">
      <img class="ZWJL" src="../image/nodata.png" alt="">
    </template>
  </div>
</template>
<style src="../css/iconfont.css"></style>
<script>
import api from '../fetch/api.js';
import {
  Waterfall, Tab, Tabs
} from 'vant';
export default {
  components: {
    // [Waterfall.name]: Waterfall,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  data() {
    return {
      //保存保单数据
      Data: '',
      disabled: false,
      page: 1,
      total: 0,
      Nodata: false,
      status: 0,
      //tabs
      filter: ['未确认', '在保中', '已结束', '已取消', '已退保'],
      activeName: 0,
      tc: ['商业险', '交强险'],
      Commonid: 0,
      who: '0',//0:商业，1:交强
    }
  },
  methods: {
    listchange(index) {
      this.who = index;
      if (index == 0) {
        this.Commonid = 0;
      } else {
        this.Commonid = 1
      }
      console.log(this.Commonid)
      this.GetInfor()
    },
    selected(index) {
      this.activeName = index
      this.status = index
      this.GetInfor()
    },
    loadMore() {
      if (this.total < this.page * 10) {
        return
      }
      this.page++;
      if (this.who == 0) {
        api.Post("Order/PolicyOrder/GetListByPage", {
          StatusID: -1,
          rows: 10,
          page: this.page
        }).then(res => {
          for (var i in res.rows) {
            this.Data.push(res.rows[i]);
          }
        })
      } else if (this.who == 1) {
        api.Post("Insurance/PHInsuranceOrder/GetListPage", {
          StatusID: -1,
          rows: 10,
          page: this.page
        }).then(res => {
          for (var i in res.rows) {
            this.Data.push(res.rows[i]);
          }
        })
      }
    },
    //获取数据
    GetInfor() {
      this.Data = '';
      this.page = 1;
      if (this.who == 0) {
        api.Post("Order/PolicyOrder/GetListByPage", {
          StatusID: this.status,
          rows: 10,
          page: this.page
        }).then(res => {
          this.Data = res.rows;
          this.total = res.total;
          if (res.rows == '') {
            this.Nodata = true;

          } else {
            this.Nodata = false;
          }
        })
      } else if (this.who == 1) {
        api.Post("Insurance/PHInsuranceOrder/GetListPage", {
          StatusID: this.status,
          rows: 10,
          page: this.page
        }).then(res => {
          this.Data = res.rows;
          this.total = res.total;
          if (res.rows == '') {
            this.Nodata = true;
          } else {
            this.Nodata = false;
          }
        })
      }
    },
    //页面跳转
    TZYM(id, NowNumber, T, d, ids) {
      if (d == 3) {
        return
      }
      if (ids == 1) {
        this.$router.push('/FQDet/' + id + '/' + NowNumber + '/' + this.who)
      } else {
        if (T == "" || T == null) {
          this.$router.push('/Voucher/' + id + '/0/1')
        } else {

          this.$router.push('/FQDet/' + id + '/' + NowNumber + '/' + this.who)
        }
      }


    },
    //处理图片
    GetImgPath(Url, Width, Height) {
      if (Url == undefined) {
        return
      }
      Url = Url.toLocaleLowerCase();
      var w = Width || 200;
      var h = Height || 200;
      if (w > 2000)
        w = 2000;
      if (h > 2000)
        h = 2000;
      var type = Url.substring(Url.lastIndexOf("."));
      return Url + "." + w + "x" + h + type;
    },
  },
  directives: {
    WaterfallLower: Waterfall('lower'),
  },
  mounted() {
    this.GetInfor();
  },
}

</script>
<style scoped>
.D1T2>div>div:first-child {
  Width: 30%;
}

.D1T2>div>div:last-child {
  Width: 70%;
  text-align: right;
}

.D1T2>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  height: 25px;
  color: #333333;
}

.D1T2 {
  width: 100%;
}

.D1TR {
  font-size: 12px;
  color: rgb(13, 187, 104);
}

.D1TF {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.D1YH2 {
  font-size: 14px;
  color: rgb(51, 51, 51);
  margin-left: 10px;
}

.D1YH1>img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.D1YH1 {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.D1T1 {
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.D1 {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  padding: 5%;
  margin-bottom: 20px;
  padding-top: 0;
}

.ZWJL {
  display: flex;
  margin: auto;
  margin-top: 50px;
  height: 180px;
}

.tab {
  overflow: hidden;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: -1px;
  bottom: auto;
}

.noch {
  width: 20%;
  float: left;
  text-align: center;
  padding: 10px 0;
  border-bottom: 2px solid #fff;
  background: #fff;
}

.pick {
  width: 20%;
  float: left;
  text-align: center;
  padding: 10px 0;
  border-bottom: 2px solid #2491ff;
  color: #2491ff;
  background: #fff;
}
</style>
